import React, { Component } from 'react';
import { Block } from '_platform/components4max/Block';
import { BarChart } from '_platform/components4max/Charts/Bar';
import { Icon,notification } from 'antd';
const echarts = require('echarts');


export default class Chart3 extends Component {
    constructor() {
        super();
        this.state = {
            xdata : ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'],
            seriesdata1: ['45', '123', '65', '145', '54', '145', '56', '54'],
            seriesdata2: ['123', '44', '124', '34', '23', '123', '23', '15'],
        }
    }

    componentWillMount(){
        let {xdata,seriesdata1,seriesdata2} = this.state;
        let next = 9;
        setInterval(()=>{
            xdata.shift();
            xdata.push('项目'+(next++)%99);
            seriesdata1.shift();
            seriesdata1.push(Math.round(Math.random()*150)+50);
            seriesdata2.shift();
            seriesdata2.push(Math.round(Math.random()*150)+50);
            this.setState({xdata,seriesdata1,seriesdata2});
        },2100);
    }
    
    render() {
        return (
                <BarChart style={{ width: '100%', height: '100%' }}
                option = {{
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    legend: {
                        data:['蒸发量','降水量','平均温度'],
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.state.xdata,
                            axisLabel: {
                                color: '#fff'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff'
                                }
                            },
                            axisLabel :{
                                color :'#fff'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '水量',
                            // min: 0,
                            // max: 250,
                            // interval: 50,
                            axisLabel: {
                                color: '#fff',
                                formatter: '{value} ml'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff'
                                }
                            },
                            axisLabel :{
                                color :'#fff'
                            }
                        },
                        {
                            type: 'value',
                            name: '温度',
                            // min: 0,
                            // max: 25,
                            // interval: 5,
                            axisLine:{
                                lineStyle:{
                                    color:'#fff'
                                }
                            },
                            axisLabel :{
                                color :'#fff'
                            }
                        }
                    ],
                    series: [
                        {
                            name:'降水量',
                            type:'bar',
                            data:this.state.seriesdata1
                        },
                        {
                            name:'平均温度',
                            type:'line',
                            yAxisIndex: 1,
                            data:this.state.seriesdata2
                        }
                    ]
                }}
                
                />
        )
    }
}
